<template>
    <!-- 搜索 -->
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
        <el-form-item label="回复内容">
            <el-input v-model="queryInfo.replyReplyText" placeholder="请输入" clearable style="width: 200px;"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getReplyList">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100% ;text-align: center;">
        <el-table-column prop="replyId" label="编号" width="80" />
        <el-table-column prop="replyReplyText" label="回复内容" show-overflow-tooltip />
        <el-table-column prop="replyCreateTime" label="回复时间"  />
        <el-table-column prop="question.questionTitle" label="问题ID" />
        <el-table-column prop="user.userName" label="回复者名称" />
        <<el-table-column label="操作" width="200px ">
            <template #default="scope">
                <el-button size="small" type="primary" @click="handleDetails(scope.row)">
                    详细
                </el-button>
                <el-button size="small" @click="handleEdit(scope.row)">
                    修改
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row.replyId)">
                    删除
                </el-button>
            </template>
            </el-table-column>
    </el-table>
     <!-- 分页 -->
     <el-pagination
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[1, 5, 10, 20]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>

        <!-- 详细表 -->
        <el-drawer v-model="visible" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">问题回复表详情!</h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                    Close
                </el-button>
            </template>
            <div :model="selectedRow">
                <div class="com1">
                    <p><b>问题发布人：</b> {{selectedRow.question.user.userName}}</p>
                    <p><b>发布时间：</b> {{selectedRow.question.questionCreatetime}}</p>
                    <p><b>问题：</b> {{selectedRow.question.questionTitle}}</p>
                    <p><b>问题陈述：</b> {{selectedRow.question.questionContent}}</p>
                </div>
                <div class="com1">
                    <p><b>回复人：</b> {{selectedRow.user.userName}}</p>
                    <p><b>回复时间：</b> {{selectedRow.replyCreateTime}}</p>
                    <p><b>回复内容：</b> {{selectedRow.replyReplyText}}</p>
                </div>              
            </div>   
        </el-drawer>
        <!-- 修改 -->
          <!-- 修改 -->
        <el-dialog v-model="saveOrUpdateVisible" :title="修改回复"  width="500" @close="close">
            <el-form :model="reply" status-icon >        
                <el-form-item label="回复内容"  :label-width="formLabelWidth"  >
                    <el-input
                        v-model="reply.replyReplyText"
                        style="width: 300px"
                        :rows="6"
                        type="textarea"
                        placeholder="请输入内容"
                    />
                </el-form-item>  
            </el-form>
                        <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="close">取消</el-button>
                            <el-button type="primary" @click="saveOrUpdate">
                            确定
                            </el-button>
                        </div>
                        </template>
        </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue';
import { onMounted } from 'vue';
const tableData = ref([]);
const total = ref(0);
const visible = ref(false);
import { useRoute } from 'vue-router';
const route = useRoute();
// 详细
const selectedRow = ref();
const saveOrUpdateVisible = ref(false);
const reply = ref({});

const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    replyReplyText: '',
    questionId: route.query.questionId,
});
console.log(route.query.questionId)

// 详细
const handleDetails = (row) => {
    visible.value = true;
    selectedRow.value = row;
    // console.log(row.question.questionTitle)
    // console.log(selectedRow.value.question.questionTitle)
    // console.log(selectedRow.value)
}

onMounted(() => {
    getReplyList();
})

const getReplyList=()=>{
    axios.get('/reply/findByPage',{params:queryInfo.value})
    .then(resp=>{
        let result = resp.data;
        total.value = result.data.total;
        // console.log(result)
        if(result.code==1){
            tableData.value = result.data.list
        }else{
            console.log('获取回复列表失败')
        }
    })
}
// 修改
const handleEdit = (row) => {
    saveOrUpdateVisible.value = true;
    reply.value = row
}
// 取消
const close = () => {
    saveOrUpdateVisible.value = false;
}
// 确定
const saveOrUpdate = () => {
    axios.put('/reply/edit',reply.value)
    .then(resp=>{
        let result = resp.data;
        if(result.code==1){
            getReplyList();
            ElMessage({
                message: '修改成功！',
                type: 'success',
            })
        }else{
            ElMessage({
                message: '修改失败！',
            })
        }
    })
    close();
}
// 删除
const handleDelete = (replyId) => {
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            axios.delete('/reply/remove', {
                params: { replyId: replyId }
            })
        .then(resp => {
            let result = resp.data;
            if (result.code == 1) {
                getReplyList();
                ElMessage({
                    message: '删除成功！',
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: '删除失败！',
                    type: 'warning',
                })    
               
            }
        })

     })
}
// 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
  queryInfo.value.pageSize = pageSize;
  getReplyList();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
  queryInfo.value.pageNum = pageNum;
  getReplyList();
}
</script>

<style  scoped>
.com1{
    margin-bottom: 20px;
}
.com1 p{
    padding: 10px 0;
}
</style>